<template>
<div id="out11">
    <div id="top3">
		<span>结算中心</span>
	</div>
	<div class="back"></div>
	<div class="addddddd">
		<div>
			<div>
				<p class="tit"><span>李四</span>15012340708</p>
				<p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
			</div>
			<span class="xiugai">修改地址</span>
		</div>
	</div>
	<p class="price price2">笨蛋请支付 <span>￥392.12</span></p>
	<p class="price">请使用第三方支付平台：</p>
	<div>
		<p class="zhiFu"><img src="../assets/img/gouwuche/xingzhuang-21.png" alt=""/><span>支付宝支付</span><img class="duihao" src="../assets/img/fenlei/dui.png"/></p>
		<p class="zhiFu"><img src="../assets/img/gouwuche/xingzhuang-20.png" alt=""/><span>微信支付</span><img class="duihao" src="../assets/img/fenlei/dui.png"/></p>
	</div>
	<p class="uD">收起 <img src="../assets/img/gouwuche/xiangshangjiantou.png" alt=""/></p>
	<p class="uD">放下 <img src="../assets/img/gouwuche/down.png" alt=""/></p>
	<span>确认支付</span>
</div>
</template>

<script>
	export default {
		name: '',
		methods: {
			round2: function() {
				var ud=false;
				$(".uD").eq(1).hide();
				$("#out11 .duihao").attr("check",false);
				$("#out11 .duihao").click(function(){
					if ($(this).attr("check")=="false") {
						$(this).css("filter","none").parent().siblings().find(".duihao").css("filter","grayscale(100%)");
						$(this).attr("check",true).parent().siblings().find(".duihao").attr("check",false);
					} else if($(this).attr("check")=="true"){
						$(this).css("filter","grayscale(100%)").parent().siblings().find(".duihao").css("filter","none");
						$(this).attr("check",false).parent().siblings().find(".duihao").attr("check",true);
					}
				});
				$(".uD").click(function(){
					ud=!ud;
					uD();
				});
				function uD(){
					if (ud==false) {
						$(".zhiFu").parent().slideDown(500);
						$(".uD").eq(1).hide();
						$(".uD").eq(0).show();
					} else if(ud==true){
						$(".zhiFu").parent().slideUp(500);
						$(".uD").eq(0).hide();
						$(".uD").eq(1).show();
					}
				};
			},
		},
		mounted: function() {
			//只有在mounted之后，才可以执行dom操作，也就是说可以在这个方法里面执行那些需要加载立即执行的方法
			this.round2();
		},
	}
</script>

<style>
	#out11{
		background: #f2f2f2;
		height: 100vh;
	}
	#out11>.back{
		height: 9.6rem;
	}
	#out11 #top3 {
		width: 100vw;
		height: 9.6rem;
		background: #e53e42;
		color: white;
		display: flex;
		position: fixed;
		z-index: 10;
		align-items: center;
		justify-content: space-around;
	}
	#out11 #top3>span {
		font-family: MicrosoftYaHei;
		font-size: 3.6rem;
		line-height: 3.6rem;
	}
	.addddddd{
		height: 18rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-bottom: 1rem;
	}
	.addddddd>div{
		width: 100vw;
		height: 16rem;
		display: flex;
		align-items: center;
		justify-content: space-around;
        background: white;
        padding-left: 2.5rem;
	}
	.addddddd>div>.xiugai{
		width: 8rem;
		height: 8rem;
		border-radius: 50%;
		border: solid 0.1rem #cccccc;
		line-height: 2.6rem;
		box-sizing: border-box;
		padding: 1.3rem 1rem;
		font-size: 2.4rem;
		text-align: center;
	}
	.addddddd>div>div{
		width: 42rem;
		height: 16rem;
		transform: translateX(-4rem);
	}
	.addddddd>div>div>.tit{
		font-size: 2.8rem;
		color: #4d4d4d;
		padding-top: 2rem;
		padding-bottom: 3rem;
	}
	.addddddd>div>div>.tit>span{
		padding-right: 7rem;
	}
	.addddddd>div>div>p{
		font-size: 2.4rem;
		color: #808080;
	}
	#out11>.price2{
		margin-bottom: 2rem;
	}
	#out11>.price{
		width: 72rem;
		height: 10rem;
		background-color: #ffffff;
		border-bottom: solid 0.1rem #cccccc;
		font-size: 2.8rem;
		line-height: 10rem;
		padding: 0 2rem;
		box-sizing: border-box;
	}
	#out11>.price>span{
		float: right;
		color: #FF0000;
	}
	.zhiFu{
		width: 72rem;
		height: 10rem;
		background-color: #ffffff;
		border-bottom: solid 0.1rem #cccccc;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 2.8rem;
	}
	.zhiFu>img{
		width: 5rem;
		height: 5rem;
	}
	.zhiFu>.duihao{
		width: 3rem;
		height: 3rem;
		filter: grayscale(100%);
	}
	.zhiFu>span{
		width: 50rem;
	}
	.uD{
		display: flex;
		align-items: center;
		justify-content: center;
		background: white;
		height: 6rem;
		font-size: 2.8rem;
	}
	.uD>img{
		width: 2.4rem;
		height: 1.4rem;
		margin-left: 2rem;
	}
	#out11>span{
		position: absolute;
		top: 75vh;
		width: 60rem;
		height: 6.6rem;
		background-color: #e53e42;
		border-radius: 3.3rem;
		left: 50%;
		margin-left: -30rem;
		font-size: 2.8rem;
		color: #FFFFFF;
		text-align: center;
		line-height: 6.6rem;
	}
</style>